<template>
  <div>
    <p>1. 获取所有图书信息</p>
    <button @click="getAllFn">点击-查看控制台</button>
    <p>2. 查询某本书籍信息</p>
    <input type="text" placeholder="请输入要查询 的书名" v-model="bName" />
    <button @click="findFn">查询</button>
    <p>3. 新增图书信息</p>
    <div>
      <input type="text" placeholder="书名" v-model="bookObj.bookname" />
    </div>
    <div>
      <input type="text" placeholder="作者" v-model="bookObj.author" />
    </div>
    <div>
      <input type="text" placeholder="出版社" v-model="bookObj.publisher" />
    </div>
    <button @click="sendFn">发布</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bName: "",
      bookObj: {
        bookname: "",
        author: "",
        publisher: "",
      },
    };
  },
  created() {
    this.getAllFn();
  },
  methods: {
    async getAllFn() {
      const { data: res } = await this.$http.get("/api/getbooks");
      console.log(res);
    },
    async findFn() {
      const { data: res } = await this.$http.get("/api/getbooks", {
        params: {
          //params 查询字符串会自动拼接到 url后面
          bookname: this.bName,
        },
      });
      console.log(res);
    },
    async sendFn() {
      const { data: res } = await this.$http.post("/api/addbook", this.bookObj);

      console.log(res);
    },
  },
};
</script>

<style></style>
